<template>
  <view class="flex-col page">
    <view class="flex-col section">
      <view class="flex-row justify-center items-center relative section_3">
        <image class="image_4 pos" src="@/static/common/back.png" @click="backToWallet" />
        <text class="text" @click="skipToExchange">{{$t('mine.exchange')}}</text>
      </view>
      <view class="flex-col group">
        <view class="flex-col relative section_4">
          <view class="flex-col justify-start items-center text-wrapper">
            <u-input class="font_2 text_2" v-model="coins" :placeholder="$t('mine.fillMSDT')"></u-input>
          </view>
          <view class="flex-row justify-between group_2">
            <view class="flex-row">
              <text class="font_3">{{$t('mine.MSDT')}}:</text>
              <text class="ml-10 font">{{ totalIntegral }}</text>
            </view>
            <text class="font text_3" @click="skipToAllRedeem()">{{$t('mine.all')}}</text>
          </view>
        </view>
        <view class="mt-12 flex-col section_5">
          <view class="flex-row justify-between items-center group_3">
            <text class="font_3 text_4">{{$t('mine.fee')}}(5%):</text>
            <text class="font">-{{ ((coins * 5) / 100).toFixed(4) }} {{$t('common.coins')}}</text>
          </view>
          <view class="mt-4 flex-row justify-between group_4">
            <text class="font_3">{{$t('mine.rate')}}:</text>
            <text class="font">{{ rate }}</text>
          </view>
          <view class="mt-4 flex-row justify-between items-center group_5">
            <text class="font_2">{{$t('mine.get')}}:</text>
            <text class="font">{{ (coins * 0.95 * rate).toFixed(4) }} SDT</text>
          </view>
        </view>
      </view>
    </view>
    <view class="flex-col relative group_6">
      <view class="flex-col justify-start items-center text-wrapper_2" @click="handleRedeem">
        <text class="font_4 text_5">{{$t('mine.now')}}</text>
      </view>
      <view class="flex-col mt-29">
        <view class="flex-row justify-between items-center">
          <text class="font_4 text_6">{{$t('mine.record')}}</text>
          <view class="flex-row">
            <text class="font_5 text_7">{{$t('mine.redeemed')}}:</text>
            <text class="font_5 text_8">{{ items.totalItems }} SDT</text>
          </view>
        </view>
        <view class="mt-14 flex-col">
          <view class="flex-row justify-between items-center mt-12 list-item" v-for="(item, index) in items.list" :key="index">
            <view class="flex-col items-start">
              <text class="font_6">{{ item.integral }} MSDT {{$t('mine.change')}} {{ item.sdt }} SDT</text>
              <text class="mt-14 font_7">{{ item.createTime }}</text>
            </view>
            <text class="font_6 text_9">{{ item.status == 1 ? '进行中' : item.status == 2 ? '已兑换' : '失败' }}</text>
          </view>
        </view>
      </view>
    </view>
    <checkPasswordModal :isShowModal="isShowModel" @confirm="handleConfirmRe"></checkPasswordModal>
    <PasswordChange2 style="z-index: 1000" v-if="password2Show" @close="password2Show = false" :email="email" />
  </view>
</template>

<script>
import { getWalletInfo, withdrawalAPI, getWithdrawalList, getProfile } from '@/service/mine';
import { getExchangeAPI } from '@/service/index.js';
import checkPasswordModal from './checkPasswordModal.vue';
import PasswordChange2 from '../../settings/components/PasswordChange2.vue';
import { mapGetters } from "vuex";
export default {
  components: { checkPasswordModal, PasswordChange2 },
  props: {},
  data() {
    return {
      items: [],
      coins: 0,
      totalIntegral: undefined,
      fee: 0,
      rate: undefined,
      isShowModel: false,
      pwd: '',
      password2Show: false
    };
  },
  computed: {
    ...mapGetters({
      profile: 'user/getProfile'
    })
  },
  created() {
    this.email = this.profile.email;
  },
  mounted() {
    this.getProfile();
    this.getWalletInfo();
    this.getExchangeU();
    this.getWithdrawList();
  },
  methods: {
    async handleConfirmRe(value) {
      this.pwd = value;
      this.isShowModel = false;
      const res = await withdrawalAPI(this.coins, this.pwd);
      if (res.code === 200) {
        uni.showToast({
          title: '提现成功',
        })
      }
    },
    backToWallet() {
      uni.navigateTo({
        url: '/pages/mine/wallet/index'
      });
    },
    async getProfile() {
      const res = await getProfile();
      this.$store.commit("user/setProfile", res.data);
    },
    async getWalletInfo() {
      const res = await getWalletInfo();
      this.totalIntegral = res.data.integral;
    },
    async getWithdrawList() {
      const res = await getWithdrawalList({
        pageNum: 1,
        pageSize: 20
      });
      this.items = res.data || [];
    },
    async getExchangeU() {
      const res = await getExchangeAPI();
      if (res.data) {
        this.rate = res.data;
      }
    },
    skipToAllRedeem() {
      this.coins = this.totalIntegral;
    },
    async handleRedeem() {
      if (!this.coins) {
        uni.showToast({
          title: 'please enter coins',
          icon: 'none'
        });
        return;
      }
      const isSetpsd2 = this.profile.ifSetSecondPwd;
      if (isSetpsd2) {
        this.isShowModel = true;
      } else {
        this.password2Show = true;
      }
    }
  }
};
</script>

<style scoped lang="scss">
.ml-5 {
  margin-left: 10rpx;
}

.mt-29 {
  margin-top: 58rpx;
}

.page {
  padding-bottom: 360rpx;
  background-color: #140c2b;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;

  .section {
    padding-bottom: 64rpx;
    background-image: url('@/static/common/b-home.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .section_2 {
      padding: 36rpx 32rpx 36rpx 72rpx;
      background-color: #33333300;

      .image {
        width: 34rpx;
        height: 18rpx;
      }

      .image_2 {
        width: 30rpx;
        height: 18rpx;
      }

      .image_3 {
        width: 48rpx;
        height: 22.66rpx;
      }
    }

    .section_3 {
      padding: 32rpx 32rpx 24rpx;
      background-color: #ffffff00;

      .image_4 {
        border-radius: 16rpx;
        width: 57rpx;
        height: 57rpx;
      }

      .pos {
        position: absolute;
        left: 31.5rpx;
        top: 50%;
        transform: translateY(-50%);
      }

      .text {
        color: #ffffff;
        font-size: 36rpx;
        font-family: PingFang SC;
        line-height: 33.84rpx;
      }
    }

    .group {
      padding: 24rpx 32rpx;

      .section_4 {
        padding: 40rpx 32rpx 0;
        background-color: #ffffff33;
        border-radius: 32rpx;
        box-shadow: 0rpx -24rpx 48rpx #05dfff1a inset, 0rpx 24rpx 48rpx #fb98ad26 inset, 0rpx 8rpx 16rpx #0000004d;
        backdrop-filter: blur(32rpx);

        .text-wrapper {
          padding: 40rpx 0 32rpx;
          background-color: #ffffff33;
          border-radius: 24rpx;

          .text_2 {
            line-height: 22.56rpx;
            padding: 6px 9px;
            width: 100%;
            border: unset;
            text-align: center;
          }
        }

        .group_2 {
          padding: 32rpx 0 48rpx;

          .text_3 {
            color: #00f6ff;
            text-decoration: underline;
          }
        }

        /deep/ .uni-input-wrapper {
          text-align: center;
          color: #00f6ff;
        }
      }

      .section_5 {
        padding: 8rpx 32rpx;
        background-color: #ffffff33;
        border-radius: 32rpx;
        box-shadow: 0rpx -24rpx 48rpx #05dfff1a inset, 0rpx 24rpx 48rpx #fb98ad26 inset, 0rpx 8rpx 16rpx #0000004d;
        backdrop-filter: blur(32rpx);

        .group_3 {
          padding: 40rpx 0 16rpx;

          .text_4 {
            line-height: 24.94rpx;
          }
        }

        .group_4 {
          padding: 32rpx 0;
          border-top: solid 1rpx #ffffff1a;
          border-bottom: solid 1rpx #ffffff1a;
        }

        .group_5 {
          padding: 24rpx 0 36rpx;
        }
      }

      .font_3 {
        font-size: 24rpx;
        font-family: PingFang SC;
        line-height: 17.8rpx;
        color: #ffffff80;
      }

      .font_2 {
        font-size: 24rpx;
        font-family: PingFang SC;
        line-height: 22.22rpx;
        color: #ffffff80;
      }
    }

    .font {
      font-size: 24rpx;
      font-family: PingFang SC;
      line-height: 17.8rpx;
      color: #ffffff;
    }
  }

  .group_6 {
    margin-top: -40rpx;
    padding-left: 32rpx;
    padding-right: 24rpx;

    .text-wrapper_2 {
      margin-right: 8rpx;
      padding: 36rpx 0;
      background-image: linear-gradient(137.2deg, #00f6ff 0%, #8312f2 69.5%, #fb97ad 100%);
      border-radius: 24rpx;

      .text_5 {
        line-height: 24.64rpx;
      }
    }

    .font_4 {
      font-size: 32rpx;
      font-family: Alibaba PuHuiTi;
      color: #ffffff;
    }

    .text_6 {
      line-height: 30.72rpx;
    }

    .font_5 {
      font-size: 24rpx;
      font-family: Alibaba PuHuiTi;
      line-height: 17.8rpx;
    }

    .text_7 {
      color: #ffffff80;
      line-height: 18.48rpx;
    }

    .text_8 {
      color: #ffffff;
      line-height: 17.18rpx;
    }

    .list-item {
      margin-right: 8rpx;
      padding: 32rpx 24rpx;
      background-color: #ffffff26;
      border-radius: 24rpx;

      &:first-child {
        margin-top: 0;
      }

      .font_6 {
        font-size: 28rpx;
        font-family: PingFang SC;
        line-height: 26.32rpx;
        color: #ffffff;
      }

      .font_7 {
        font-size: 20rpx;
        font-family: PingFang SC;
        line-height: 14.84rpx;
        color: #ffffff80;
      }

      .text_9 {
        color: #00f6ff;
        line-height: 26.2rpx;
      }
    }
  }
}
</style>
